<!--  -->
<template>
  <div class="pdfStyle">
    <ul>
      <li v-for="item in pdfData" :key="item.id" @click="showPdf(item.url)">
        <img :src="require('_as/pdfIcon.jpg')" alt="">
        <span>{{item.title}}</span>
      </li>
    </ul>
    <!-- pdf数据 -->
    <div style="overflow: hidden; height: 100px">
      <el-dialog
        :visible.sync="centerDialogVisible"
        width="70%"
        center
        :fullscreen="true"
        top="0vh">
        <div class="pdfContent">
          <div class="pdfMask"></div>
          <iframe class="pdfIframe" ref="mainiframe" :src="pdfURL" style="width: 100%; height: 87vh;"></iframe>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pdfData: [
        {
          id: 1,
          title: '鰼国•習姓•鰼部•习水-诗联',
          url: 'http://qiniucdn.iwiteks.com/%E9%B0%BC%E5%9B%BD%E2%80%A2%E7%BF%92%E5%A7%93%E2%80%A2%E9%B0%BC%E9%83%A8%E2%80%A2%E4%B9%A0%E6%B0%B4-%E8%AF%97%E8%81%94.pdf'
        },
        {
          id: 2,
          title: '鰼国•習姓•鰼部•习水-百年诗文',
          url: 'http://qiniucdn.iwiteks.com/%E9%B0%BC%E5%9B%BD%E2%80%A2%E7%BF%92%E5%A7%93%E2%80%A2%E9%B0%BC%E9%83%A8%E2%80%A2%E4%B9%A0%E6%B0%B4-%E7%99%BE%E5%B9%B4%E8%AF%97%E6%96%87.pdf'
        },
        {
          id: 3,
          title: '鰼国•習姓•鰼部•习水(简写本)',
          url: 'http://qiniucdn.iwiteks.com/%E9%B0%BC%E5%9B%BD%E2%80%A2%E7%BF%92%E5%A7%93%E2%80%A2%E9%B0%BC%E9%83%A8%E2%80%A2%E4%B9%A0%E6%B0%B4%28%E7%AE%80%E5%86%99%E6%9C%AC%29.pdf'
        }
      ],
      centerDialogVisible: false,
      pdfURL: ''
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    showPdf (url) {
      this.pdfURL = url
      this.centerDialogVisible = true
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.pdfStyle {
  ul {
    li {
      width 274px
      box-shadow 0 0 20px 1px #ddd
      padding 4px 10px
      display inline-block
      margin 10px
      cursor default
      text-overflow: ellipsis
      overflow: hidden
      white-space: nowrap
      img {
        width 40px
        height 50px
        margin-right 12px
        vertical-align middle
      }
    }
  }
  .pdfContent {
    position relative
    width 100%
    overflow hidden
    .pdfMask {
      position absolute
      top 0
      left 0
      background #fff
      width 100%
      height 50px
      opacity 0
    }
  }
}
</style>
